<template>
  <div class="rule-detail">
    <div v-if="!rule" class="empty-state">
      <n-empty description="未选择规则" />
    </div>
    
    <div v-else class="detail-content">
      <!-- 基本信息 -->
      <n-descriptions title="基本信息" :column="2" bordered>
        <n-descriptions-item label="规则名称">
          {{ rule.name }}
        </n-descriptions-item>
        <n-descriptions-item label="状态">
          <n-tag :type="rule.enabled ? 'success' : 'error'">
            {{ rule.enabled ? '已启用' : '已禁用' }}
          </n-tag>
        </n-descriptions-item>
        <n-descriptions-item label="创建时间">
          {{ formatTimestamp(rule.createdAt) }}
        </n-descriptions-item>
        <n-descriptions-item label="更新时间">
          {{ formatTimestamp(rule.updatedAt) }}
        </n-descriptions-item>
        <n-descriptions-item label="描述" :span="2">
          {{ rule.description || '无描述' }}
        </n-descriptions-item>
      </n-descriptions>

      <!-- 条件列表 -->
      <div class="section">
        <h3>触发条件 ({{ rule.conditions.length }})</h3>
        <div v-if="rule.conditions.length === 0" class="empty-section">
          <n-alert type="info" title="暂无条件" />
        </div>
        <div v-else class="conditions-list">
          <div
            v-for="(condition, index) in rule.conditions"
            :key="index"
            class="condition-item"
          >
            <n-space>
              <n-tag type="info">{{ getFieldLabel(condition.field || '') }}</n-tag>
              <n-tag>{{ getOperatorLabel(condition.operator || '') }}</n-tag>
              <n-tag type="warning">{{ condition.value }}</n-tag>
            </n-space>
          </div>
        </div>
      </div>

      <!-- 行为列表 -->
      <div class="section">
        <h3>触发行为 ({{ rule.actions.length }})</h3>
        <div v-if="rule.actions.length === 0" class="empty-section">
          <n-alert type="info" title="暂无行为" />
        </div>
        <div v-else class="actions-list">
          <div
            v-for="(action, index) in rule.actions"
            :key="index"
            class="action-item"
          >
            <div class="action-header">
              <n-tag type="success">{{ getActionTypeLabel(action.type) }}</n-tag>
            </div>
            
            <div v-if="action.script" class="action-script">
              <n-code
                :code="action.script"
                language="javascript"
                show-line-numbers
                word-wrap
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="actions">
        <n-space>
          <n-button type="primary" @click="handleEdit">
            <template #icon>
              <n-icon :component="EditOutline" />
            </template>
            编辑规则
          </n-button>
          
          <n-button type="error" @click="handleDelete">
            <template #icon>
              <n-icon :component="DeleteOutline" />
            </template>
            删除规则
          </n-button>
          
          <n-button type="info" @click="handleTest">
            <template #icon>
              <n-icon :component="PlayOutline" />
            </template>
            测试规则
          </n-button>
        </n-space>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import EditOutline from '@vicons/ionicons5/Create';
import DeleteOutline from '@vicons/ionicons5/Trash';
import PlayOutline from '@vicons/ionicons5/Play';
import type { Rule } from '../types';
import { formatTimestamp } from '../utils/format';

// Props
interface Props {
  rule: Rule | null;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  edit: [rule: Rule];
  delete: [id: string];
  test: [rule: Rule];
}>();

// 字段标签映射
const fieldLabels: Record<string, string> = {
  url: 'URL',
  method: '请求方法',
  statusCode: '状态码',
  headers: '请求头',
  responseHeaders: '响应头',
  body: '请求体',
  responseBody: '响应体'
};

// 操作符标签映射
const operatorLabels: Record<string, string> = {
  contains: '包含',
  equals: '等于',
  matches: '匹配正则',
  not_contains: '不包含',
  not_equals: '不等于',
  starts_with: '开始于',
  ends_with: '结束于'
};

// 行为类型标签映射
const actionTypeLabels: Record<string, string> = {
  script: 'JavaScript脚本',
  log: '日志记录',
  block: '阻止请求',
  modify_request: '修改请求',
  modify_response: '修改响应'
};

// 方法
function getFieldLabel(field: string): string {
  return fieldLabels[field] || field;
}

function getOperatorLabel(operator: string): string {
  return operatorLabels[operator] || operator;
}

function getActionTypeLabel(type: string): string {
  return actionTypeLabels[type] || type;
}

function handleEdit() {
  if (props.rule) {
    emit('edit', props.rule);
  }
}

function handleDelete() {
  if (props.rule) {
    emit('delete', props.rule.id);
  }
}

function handleTest() {
  if (props.rule) {
    emit('test', props.rule);
  }
}
</script>

<style scoped lang="less">
.rule-detail {
  padding: 24px;
  
  .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
  }
  
  .detail-content {
    .section {
      margin-top: 24px;
      
      h3 {
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      
      .empty-section {
        margin-bottom: 16px;
      }
      
      .conditions-list,
      .actions-list {
        .condition-item,
        .action-item {
          padding: 12px;
          border: 1px solid #e0e0e0;
          border-radius: 6px;
          margin-bottom: 8px;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
        
        .action-item {
          .action-header {
            margin-bottom: 8px;
          }
          
          .action-script {
            margin-top: 8px;
          }
        }
      }
    }
    
    .actions {
      margin-top: 32px;
      padding-top: 16px;
      border-top: 1px solid #e0e0e0;
    }
  }
}
</style> 
